<template>
<view>
 <view class="content">
        	<sl-filter :independence="true" :color="titleColor" :themeColor="themeColor" :menuList.sync="menuList" @result="result"></sl-filter>
     </view>
<!-- <view v-for="(item, idx) in actList" :key="idx" class="act_sec" :data-recruit-id="item.id">
    <view class="img_sec">
        <image class="headimg" mode="scaleToFill" :src="item.deptheadurl?item.deptheadurl:'/static/images/defaultorg.png'"></image>
        <image class="thumb" mode="aspectFill" :src="item.thumb"></image>
    </view>
    <view class="title">{{item.title}} | {{item.orgName}}</view>
    <view class="desc">{{item.content}} </view>
	<view style="padding-top: 5px;"> <button @click="open(item.id)"  type="primary">点单</button></view>
	
	</view> -->
	<view style="min-height:900rpx;overflow: scroll;"  @tap="toDetail" v-for="(item, idx) in actList" :key="idx" :data-recruit-id="item.id">
		<view class="service-box" @tap="toDetail">
			<view class="serbox_topleft">11</view>
			<view class="serbox_topright"><view style="position: absolute;right: 38rpx;top: 5rpx;">1</view><view style="position: absolute;right: 15rpx;top: 15rpx;font-size: 14rpx;">/2</view></view>
			<view class="serbox_center">垃圾</view>
			<view class="serbox_bottomleft">
				<image src="/static/images/icon_rec_location.png"></image>
				11
			</view>
			<view class="serbox_bottomright">11211212</view>
		</view>
	</view>

	<!-- <uni-popup ref="popup" type="bottom">
		<view style="background-color: #ffffff;">
			<form>
				<view class="uni-form-item uni-column">
						<view class="title"><text class="uni-form-item__title">需求人数</text></view>
						<view class="uni-input-wrapper">
						    <input class="uni-input" v-model="need" focus placeholder="需求人数" />
						</view>
		       </view>
			   <view class="uni-form-item uni-column">
			   						<view class="title"><text class="uni-form-item__title">需求时间</text></view>
			   	<view class="uni-input-wrapper">
			   				
			   						    	<view class="uni-list-cell">
			   						    		
			   						    		<view class="uni-list-cell-db">
			   						    			<uni-datetime-picker v-model="datetimerange" type="datetimerange" rangeSeparator="至"  />
			   						    		</view>
			   						    	</view>
			   					
			   	</view>
				<view class="uni-form-item uni-column">
										<view class="title"><text class="uni-form-item__title">备注</text></view>
										<view class="uni-input-wrapper">
										    <input class="uni-input" v-model="remark" focus placeholder="备注" />
										</view>
				</view>
				<view class="uni-btn-v">
					<button type="primary" @click="diandan">提交</button>
				</view>
				
			   </view>
			</form>
		</view>
	</uni-popup> -->
<!-- <view class="no_data" v-if="actList.length===0">暂无数据~</view> -->
<!-- <view class="no_more" v-if="actList.length!==0&&noMore">没有更多数据了~</view> -->
</view>
</template>

<script>
	import slFilter from '@/components/sl-filter/sl-filter.vue';
          var t = require("../../utils/request.js"),
		 config = require("../../utils/config.js").config,
         a = function (t) {
         return t && t.__esModule ? t : { default: t};
         }(require("../../utils/api.js")),
         e = require("../../utils/util.js"),
         i = a.default.recruitList,
         o = a.default.dictionaryCounty,
         app = getApp();
	     import {mySList,addService} from '../../api/activityManage.js'
export default {
  data() {
    return {
		themeColor: '#000000',
						titleColor: '#666666',
						filterResult: '',
						menuList: [{
								'title': '地区',
								'key': 'sort',
								'isSort': true,
								'reflexTitle': true,
								'defaultSelectedIndex': 0,
								'detailList': [{
										'title': '全部',
										'value': ''
									},
									{
										'title': '东湖街道新时代文明实践所',
										'value': 'add_time'
									},
									{
										'title': '灵芝街道新时代文明实践所',
										'value': 'wages_up'
									},
									{
										'title': '东浦街道新时代文明实践所',
										'value': 'location'
									}
								]
							},{
								'title': '类型',
								'key': 'sort',
								'isSort': true,
								'reflexTitle': true,
								'defaultSelectedIndex': 0,
								'detailList': [{
										'title': '类型',
										'value': ''
									},
									{
										'title': '扫地',
										'value': 'add_time'
									},
									{
										'title': '家务帮扶',
										'value': 'wages_up'
									},
									{
										'title': '第三类',
										'value': 'location'
									}
								]
							},
							{
								'title': '状态',
								'key': 'sort',
								'isSort': true,
								'reflexTitle': true,
								'defaultSelectedIndex': 0,
								'detailList': [{
										'title': '状态',
										'value': ''
									},
									{
										'title': '待接单',
										'value': 'add_time'
									},
									{
										'title': '已结束',
										'value': 'wages_up'
									},
								]
							}
						],
		startTime:'',
		endTime:'',
		nowId:'',
	  remark:'',
	  datetimerange:'',
	  need:'',
      level: 2,
      provinceId: "",
      cityId: "",
      page: 1,
      pageSize: 1,
      county: "全部",
      countyId: "",
      countyIdx: 0,
      category: "全部活动",
      categoryId: "",
      categoryIdx: 0,
      order: "智能筛选",
      orderIdx: 0,
      orderId: "",
      countyList: [{
        name: "全部",
        id: "",
        _id: "",
        code: ""
      }],
      categoryList: [{
        name: "全部活动",
        value: "",
        _id: ""
      }],
      orderList: [{
        name: "智能筛选",
        value: "",
        _id: ""
      }],
      actList: [{name:'1',id:1}],
      noMore: !1
    };
  },

   components: {slFilter},
  props: {},
  onLoad: function (t) {
    var a = this;

    try {
      var i = uni.getStorageSync("areaId");
      console.log(i), this.setData({
        provinceId: i.p_id,
        cityId: i.c_id,
        countyId: i.d_id,
        level: i.level
      });
    } catch (t) {
      console.log(t);
    }

    this.getServiceData()
  },
  onReady: function () {},
  onShow: function () {},
  onHide: function () {},
  onUnload: function () {},
  onPullDownRefresh: function () {
    var t = this;
    this.setData({
      page: 1,
      noMore: !1
    })
	 this.getServiceData()
	 },
  onReachBottom: function () {
    var t = this;

    if (!this.noMore) {
      var a = this.page;
      this.setData({
        page: ++a
      })
	  this.getServiceData()
    }
  },
  onShareAppMessage: function () {
    return {
      title: "让公益更生活 让生活更公益",
      path: "/pages/index/index",
      imageUrl: "/static/images/zyh_logo.jpg"
    };
  },
  watch:{
	  datetimerange(newval) {
	  	console.log('范围选:', this.datetimerange);
	  }
  },
  methods: {
	  readdetaile(){
		  
	  },
	  result(val) {
	  				console.log('filter_result:' + JSON.stringify(val));
	  				this.filterResult = JSON.stringify(val, null, 2)
	  			},
	  diandan(){
		  var data = {}
		  data.sid = this.nowId
		  data.vid = app.globalData.zyzId
		  data.remark = this.remark
		  data.need = this.need
		  data.startTime = this.datetimerange[0]
		  data.endTime = this.datetimerange[1]
		  if(!data.vid){
			  uni.navigateTo({
			  	url:"/pages/entry/login"
			  })
		  }
		  if(data.need <=0){
			  uni.showToast({
			  	title:"请输入需求人数",
				icon:"none"
			  })
		  }
		  if(!data.startTime || !data.endTime){
		  			  uni.showToast({
		  			  	title:"请选择时间",
		  				icon:"none"
		  			  })
		  }
		  addService(data).then((ret=>{
			  if(ret.success){
				  uni.showToast({
				  	title:"点单成功",
				  				icon:"none"
				  })
				  
				  
			  }else{
				 uni.showToast({
				 	title:ret.message,
				 				icon:"none"
				 }) 
			  }
			   this.$refs.popup.close()
		  }))
	  },
	   open(id){
				this.nowId = id
	          this.$refs.popup.open('bottom')
	        },
	  addService(id){
		  let uid = app.globalData.zyzId
		  if(!uid){
			  uni.navigateTo({
			  	url:"/pages/entry/login"
			  })
		  }else{
			 uni.navigateTo({
			   url: "/pages/act/detail?id=" + t.currentTarget.dataset.recruitId
			 });
		  }
		  
	  },
	  getServiceData(){
		  // var that = this
		  // var uid = app.globalData.zyzId
		  // if(!uid){
			 //  uni.navigateTo({
			 //  	url:"/pages/entry/login"
			 //  })
		  // }
		  // mySList({"pageSize":this.pageSize,"pageNo":this.page,"id":uid}).then((ret)=>{console.log(ret)
			 //  if (ret.success) {
			 //    ret.data.length < 10 && that.setData({
			 //      noMore: !0
			 //    });
			 //    var i = [];
			 //    ret.data.forEach(function (t) {
			 //  				t.thumb = t.imageUrl ? config.host + "/sysFileInfo/preview?id=" + t.imageUrl : "/static/images/defaultorg.png";
			 //  				i.push(t);
			 //  			}), that.setData({
			 //      actList: i
			 //    });
			 //  }
		  // })
	  },
    countyChange: function (t) {
      var a = t.detail.value,
          e = this.countyList;
      2 == this.level ? this.setData({
        county: e[a].name,
        countyId: e[a].id
      }) : 1 == this.level && this.setData({
        county: e[a].name,
        cityId: e[a].id
      }), uni.pageScrollTo({
        scrollTop: 0,
        success: function () {
          uni.startPullDownRefresh();
        }
      });
    },
    categoryChange: function (t) {
      var a = t.detail.value,
          e = this.categoryList;
      this.setData({
        category: e[a].name,
        categoryId: e[a]._id
      }), uni.pageScrollTo({
        scrollTop: 0,
        success: function () {
          uni.startPullDownRefresh();
        }
      });
    },
    orderChange: function (t) {
      var a = t.detail.value,
          e = this.orderList;
      this.setData({
        order: e[a].name,
        orderId: e[a].value
      }), uni.pageScrollTo({
        scrollTop: 0,
        success: function () {
          uni.startPullDownRefresh();
        }
      });
    },
    getCountyList: function () {
      var a = this,
          e = {
        data: {
          api: o,
          typecode: "areatree",
          parentid: this.countyId || this.cityId || this.provinceId
        }
      };
      return (0, t.request)(e, "common", !1).then(function (t) {
        if (console.log(t), t.data.length > 0 && !a.countyId) {
          var e = [{
            name: "全部",
            id: "",
            _id: "",
            code: ""
          }];
          a.setData({
            countyList: e.concat(t.data)
          });
        } else a.setData({
          countyList: []
        });
      });
    },
    getRecruitList: function () {
			var a = {
				data: {
					api: i,
					pageNo: this.page,
					pageSize: this.pageSize,
					x: app.globalData.longitude,
					y: app.globalData.latitude,
				}
			};
      return (0, t.request)(a, "normal", !0);
    },
    toDetail: function (t) {
   uni.navigateTo({
     url: "/pages/service/detail?id=" + t.currentTarget.dataset.recruitId
   }); 
   // uni.navigateTo({
   //    url: "/pages/service/detai"
   //  });
    }
  }
};
</script>
<style>
	@import '@/common/uni.css';
	.title {
	    padding: 5px 13px;
	}

page {
    width: 100%;
    height: auto;
    /* min-height: 100%; */
    background: #f4f4f4;
    /* padding-top: 100rpx; */
    padding-bottom: 60rpx;
}
.service-box{
	position: relative;
	margin: 10rpx;
	width: 97%;
	height: 250rpx;
	background: #FFFFFF;
	border-radius: 10rpx;
	box-shadow:0rpx 0rpx 10rpx #d5d5d5;
}
.serbox_topleft{
	position: absolute;
	left: 30rpx;
	top: 30rpx;
	color: #f97373;
	padding: 5rpx 5rpx;
	background-color: #ffeeee;
	border-radius: 10rpx;
}
.serbox_topright{
	position: absolute;
	right: 30rpx;
	top: 30rpx;
	padding: 5rpx 5rpx;
	border-radius: 10rpx;
}
.serbox_center{
	position: absolute;
	left: 30rpx;
	top: 110rpx;
	font-size: 36rpx;
}
.serbox_bottomleft{
	font-size: 18rpx;
	position: absolute;
	left: 30rpx;
	bottom: 30rpx;
	color: #333333;
}
.serbox_bottomleft image{
	width: 24rpx;
	height: 24rpx;
}
.serbox_bottomright{
	position: absolute;
	right: 30rpx;
	bottom: 30rpx;
	font-size: 18rpx;
	color: #333333;
}
.select_wrapper {
    position: fixed;
    top: 0;
    /*  #ifdef  H5  */
    top:88rpx;
    /*  #endif  */
    left: 0;
    z-index: 99;
    width: 100%;
    height: 100rpx;
    justify-content: flex-start;
    background: #fff;
    border-top: 1rpx solid #e1e2e3;
    background: #f4f4f4;
    margin-bottom: 20rpx;
    padding-bottom: 10rpx;
}

.select_wrapper picker {
    flex: 0 0 33.33%;
    width: 33.33%;
    height: 90rpx;
}

.select_wrapper picker.double {
    flex: 0 0 50%;
    width: 50%;
    height: 90rpx;
}

.select_wrapper .select_sec {
    width: 100%;
    height: 90rpx;
    background: #fff;
}

.select_wrapper picker+picker>.select_sec {
    border-left: 1rpx solid #e1e2e3;
}

.select_sec .txt {
    flex: none;
    height: 100%;
    line-height: 90rpx;
}

.select_sec image {
    flex: 0 0 12rpx;
    width: 12rpx;
    height: 6rpx;
    margin-left: 12rpx;
}

.act_sec {
    width: 100%;
    min-height: 445rpx;
    height: auto;
    padding: 30rpx;
    margin-bottom: 10rpx;
    background: #fff;
}

.img_sec {
    position: relative;
    width: 100%;
    height: 280rpx;
    margin-bottom: 30rpx;
}

.img_sec .tag {
    position: absolute;
    top: -8rpx;
    left: -8rpx;
    z-index: 3;
    width: 160rpx;
    height: 52rpx;
}

.img_sec .tag image {
    z-index: 4;
}

.img_sec .tag image,.img_sec .tag text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.img_sec .tag text {
    z-index: 5;
    text-align: center;
    line-height: 48rpx;
    font-size: 24rpx;
    color: #fff;
}

.img_sec .thumb {
    width: 100%;
    height: 100%;
    border: 1rpx solid #e1e2e3;
    border-radius: 10rpx;
}

.img_sec .headimg {
    position: absolute;
    bottom: -40rpx;
    right: 30rpx;
    z-index: 5;
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
}

.act_sec .title {
    width: 100%;
    margin-bottom: 20rpx;
    font-size: 32rpx;
    color: #333;
}

.act_sec .desc,.act_sec .title {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.act_sec .desc {
    font-size: 24rpx;
}
</style>